import {useTags} from '../../hooks/useTags';
import React from 'react';
import {useParams} from 'react-router-dom';
import {RecordItemWithId, useRecords} from '../../hooks/useRecords';
import {RecordContent} from './RecordContent';
import {SettingLayout} from 'components/SettingLayout';
import {NoInfoError} from '../../components/NoInfoError';

type Params = {
  recordIdString: string;
}

const RecordEditor: React.FC = () => {
  const {recordIdString} = useParams<Params>();

  const {findTag} = useTags();
  const {findRecord} = useRecords();
  const record = findRecord(parseInt(recordIdString));

  const recordContent = (record: RecordItemWithId) => {
    const tagName = findTag(record.tagId).name;
    return (<RecordContent record={record} tagName={tagName}/>);
  };
  return (
    <SettingLayout title="编辑账目">
      {record ? recordContent(record) : <NoInfoError text="账目不存在" />}
    </SettingLayout>
  );
};

export {RecordEditor};